<template>
  <ContentBox title="考试质量" height="45%" width="95%">
    <div class="exam_quality">
      <div class="barChart" ref="chartBar"></div>
      <div class="tab_box">
        <TableList
          :headerListData="headerListData"
          :bodyListData="bodyListData"
          tableHeight="105px"
        />
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from './contentBox'
import TableList from './TableList'

export default {
  components: {
    ContentBox,
    TableList,
  },
  data() {
    return {
      // 表格头部数据
      headerListData: [
        {
          name: '日期',
          width: '24%',
          key: 'date',
        },
        {
          name: '名称',
          width: '28%',
          key: 'name',
        },
        {
          name: '人数',
          width: '20%',
          key: 'numPeople',
        },
        {
          name: '合格率',
          width: '28%',
          key: 'passRate',
        },
      ],
      // 表格数据
      bodyListData: [
        {
          date: '2021-4-15',
          name: '编辑文字内容',
          numPeople: '12',
          passRate: '10%',
        },
        {
          date: '2021-4-15',
          name: '编辑文字内容',
          numPeople: '12',
          passRate: '10%',
        },
        {
          date: '2021-4-15',
          name: '编辑文字内容',
          numPeople: '12',
          passRate: '10%',
        },
        {
          date: '2021-4-15',
          name: '编辑文字内容',
          numPeople: '12',
          passRate: '10%',
        },
        {
          date: '2021-4-15',
          name: '编辑文字内容',
          numPeople: '12',
          passRate: '10%',
        },
        {
          date: '2021-4-15',
          name: '编辑文字内容',
          numPeople: '12',
          passRate: '10%',
        },
      ],

      chartBar: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setBarChart()
    })
  },
  methods: {
    setBarChart() {
      this.chartBar = this.echarts.init(this.$refs.chartBar)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '3%',
          top: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
              lineStyle: {
                color: '#5d82a9',
              },
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              color: '#73dff2',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#5d82a9',
              },
            },
            axisLabel: {
              color: '#73dff2',
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '20px',
            itemStyle: {
              color: '#b2fdfc',
            },
            data: [20, 40, 60, 65, 70, 75, 90],
          },
        ],
      }
      this.chartBar.setOption(option, true)
    },
  },
  beforeDestroy() {
    this.chartBar = null
  },
}
</script>

<style scoped lang="scss">
.exam_quality {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  .barChart {
    width: 90%;
    height: 50%;
  }
  .tab_box {
    width: 90%;
    height: 50%;
  }
}
</style>